/*
 * @Description: 用户红包记录
 * @Author: kanglin
 * @Date: 2018-07-19 09:29:55
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@pad-radio: 10rem/1536;
	@phone-radio: 10rem/750;
    .v__luck__money__record{
		// background-color:
		background-image: linear-gradient(45deg,#6f0bb5, #b3267e );
		height: 100%;
		position: relative;
		// top: 0;
		width: 100%;
		// bottom: 0;

		.header{
			text-align: center;
			width: 100%;
			color: #ffffff;
		}

		.person{
			position: absolute;
			bottom: 0;
			height: 554*@pad-radio;
			width: 716*@pad-radio;
			left: 50%;
			transform: translateX(-50%);
			background-size: 100%;
			background-repeat: no-repeat;
			background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/renwu_.png');
		}
		.record{
			// width: 1338* @pad-radio;
			// margin: 92* @pad-radio auto 0;
			position: absolute;
			top: 172 *@pad-radio;;
			right: 110 *@pad-radio;
			left: 110 *@pad-radio;
			bottom: 136*@pad-radio;
		}
        .record__header{
			background: #e75385;
			height: 128*@pad-radio;
			position: relative;
			border-radius: 30*@pad-radio 30*@pad-radio 0 0;
		}
		.record__header__avantar{
			position: absolute;
			display: block;
			left: 50%;
			transform: translateX(-50%);
			width: 180* @pad-radio;
			height:180* @pad-radio;
			border: 2px solid #e75385;
			background: #eeeeee;
			top: -92* @pad-radio;
			border-radius: 50%;
			overflow: hidden;
			background-size: 100%;
            background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/default-avantar.jpg');
			&>img{
				width: 100%;
			}
		}
		.record__content{
			background: rgba(255, 255, 255, .65);
			position: absolute;
			top: 128* @pad-radio;
			bottom: 0;
			width: 100%;
			border-radius:  0 0 30*@pad-radio 30*@pad-radio;
		}
        .record__content__list{
			overflow: auto;
			position: absolute;
			top: 126 * @pad-radio;
			left: 0;
			right: 0;
			bottom: 0 * @pad-radio;
			margin: 0 90*@pad-radio;
			// height: 500px;
        }
        .record__content__list__item{
			height: 110* @pad-radio;
			line-height: 110* @pad-radio;
			position: relative;
        }
        .item__date{
			display: inline-block;
			font-size: 36* @pad-radio;
			padding: 0 20* @pad-radio;
			vertical-align: top;
			color: #666666;
        }
        .item__date__amount{
			display: inline-block;
			position: absolute;
			right: 0;
			color: #ad95a7;
			font-size: 36* @pad-radio;
        }
        .item__step{
            display: inline-block;
            width: 18* @pad-radio;
            height: 18* @pad-radio;
            background: #c60b2c;
            border-radius: 50%;
            vertical-align: 20%;
            position: relative;
            line-height: 100%;
        }

        .item__step::before{
            content: '';
            position: absolute;
            display: inline-block;
            width: 1px;
            height: 55* @pad-radio;
            background: #c60b2c;
            left: 50%;
			transform:translate(-50%, -100%);
        }
        .item__step::after{
            content: '';
            position: absolute;
            display: inline-block;
            width: 1px;
            height: 55* @pad-radio;
            background: #c60b2c;;
			left: 50%;
			transform: translate(-50%, 0);
        }
        .record__content__list__item:last-child .item__step::after{
            display: none;
        }

        .record__content__list__item:first-child .item__step::before{
            display: none;
		}

		.record__content__amount{
			text-align: center;
			font-size: 32* @pad-radio;
			line-height: 32* @pad-radio;
			padding-top: 36*@pad-radio;
			margin-bottom: 60* @pad-radio;
			vertical-align: middle;
		}
		.item__date__amount{
			line-height: 110* @pad-radio;
		}
		.item__date__amount__money, .record__content__amount__money{
			color: #c60b2c;
		}
	}

	/* 小屏幕 */
	.v__luck__money__record.phone{
		.header{
			height: 100 *@phone-radio;
			font-size: 40 *@phone-radio;
			line-height: 100 *@phone-radio;
			background: rgba(60,60,60,.1);
		}
		.header__back{
			width: 40 *@phone-radio;
			height: 40 *@phone-radio;
			display: inline-block;
			left: 18 *@phone-radio;
			line-height: 100 *@phone-radio;
			position: absolute;
			&>img{
				width: 100%;
			}
		}
		.person{
			height: 356*@phone-radio;
			width: 460*@phone-radio;
		}
		.record{
			position: absolute;
			top: 108 *@phone-radio;
			right: 36 *@phone-radio;
			left: 36 *@phone-radio;
			bottom: 54*@phone-radio;
		}
		.record.inapp{
			top: 190 *@phone-radio;
		}
        .record__header{
			height: 90*@phone-radio;
			border-radius: 46*@phone-radio 46*@phone-radio 0 0;
		}
		.record__header__avantar{
			width: 148* @phone-radio;
			height: 148* @phone-radio;
			top: -76* @phone-radio;
		}
		.record__content{
			top: 90*@phone-radio;
			border-radius:  0 0 46*@phone-radio 46*@phone-radio;
		}
        .record__content__list{
			top: 96 * @phone-radio;
			bottom: 60 * @pad-radio;
			margin: 0 90*@pad-radio;
        }
        .record__content__list__item{
			height: 78* @phone-radio;
			line-height: 110* @phone-radio;
        }
        .item__date{
			font-size: 30* @phone-radio;
			line-height: 78* @phone-radio;
        }
        .item__date__amount{
			font-size: 30* @phone-radio;
        }
        .item__step{
            width: 18* @phone-radio;
			height: 18* @phone-radio;
			vertical-align: 70%;
        }

        .item__step::before{
            height: 39* @phone-radio;
        }
        .item__step::after{
            height: 39* @phone-radio;

        }

		.record__content__amount{
			font-size: 30* @phone-radio;
			line-height: 1;
			padding-top: 32*@phone-radio;
			margin-bottom: 68* @phone-radio;
		}
		.item__date__amount{
			line-height: 78* @phone-radio;
		}
	}

	.v__luck__money__record{
		.record__header__button{
			width: 68 *@phone-radio;
			height: 68 *@phone-radio;
			position: absolute;
			top: 16 *@phone-radio;
			right: 50 *@phone-radio;
			&>img{
				width: 100%;
			}
		}
	}
</style>

<template>
	<div
		v-if="is_visble"
		class="v__luck__money__record phone">

		<div
			v-if="is_in_webapp"
			class="header">
			<i
				class="header__back"
				@click="toHome">
				<img
					src="//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/back.png"
					alt="">
			</i>
			红包记录
		</div>

		<!-- <back
			v-if="is_in_webapp"
			path="/" /> -->

		<div class="person"/>
		<div
			:class="{inapp: is_in_webapp}"
			class="record">
			<div class="record__header">
				<div class="record__header__avantar">
					<img
						:src="avantar"
						alt="">
				</div>
				<div
					v-if="is_button_visible"
					class="record__header__button"
					@click="editAliAccount">
					<img
						src="//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/zfb.png"
						alt="">
				</div>
				<!-- <p>领取红包记录</p> -->
			</div>
			<div class="record__content">
				<p class="record__content__amount">
					红包总金额:
					<span class="record__content__amount__money">
						￥{{ total_amount }}
					</span>
				</p>
				<ul class="record__content__list">
					<li
						v-for="(item) in bonuses"
						:key="item.id"
						class="record__content__list__item">
						<i class="item__step"/>
						<div class="item__date">
							{{ item.created_at | formatDate }}
						</div>
						<div class="item__date__amount">
							领取红包:
							<span class="item__date__amount__money">
								￥{{ Number(item.amount).toFixed(2) }}
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { parseQueryString, isInWebApp } from 'src/utils/helper';
import API_LIST from 'src/API_LIST';
import back from '../back';

const MIRROR_AUTHORIZER_ID = 4;

export default {
	name: 'LuckMoneyRecord',
	components: {
		back,
	},
	filters: {
		/**
		 *  格式化时间
		 * @param {string} date {返回时间}
		 */
		formatDate(date) {
			if (date) {
				const month = date.substring(5, 7);
				const day = date.substring(8, 10);
				return `${month}月${day}日`;
			}
			return '';
		},
	},
	data() {
		return {
			bonuses: [],
			avantar: null,
			total_amount: 0.00,
			is_store_admin: true,
			form: {
				store_admin_id: null,
				openid: null,
				appid: null,
			},
			is_visble: false,
			is_in_webapp: isInWebApp(),
		};
	},
	computed: {
		...mapGetters('userInfo', [
			'getUserInfo',
		]),
		is_button_visible() { // 不是美妆镜 而且有阿里账号
			return !this.isMirrorUser() && this.hasAlipayAccount();
		},
	},

	created() {
		if (this.checkUserAccount()) {
			this.is_visble = true;
			this.initData();
		}
	},

	methods: {
		/**
		 * 转到首页
		 * @return {undefined}
		 */
		toHome() {
			this.$router.replace({
				path: '/',
			});
		},

		/**
		 *  检查用户的账号
		 * 	@return {Boolean}
		 */
		checkUserAccount() {
			if (!this.isMirrorUser() && !this.hasAlipayAccount()) {
				this.$router.replace({
					path: '/lucky-money-bind-account',
				});
				return false;
			}
			return true;
		},

		/**
		 *  编辑支付宝账号
		 * 	@return {undefined}
		 */
		editAliAccount() {
			this.$router.push({
				path: '/lucky-money-edit-account',
			});
		},

		/**
		 *  判断是当前用户是否在使用魔妆镜公众号
		 * @return {Boolean}
		 */
		isMirrorUser() {
			const { authorizer_id } = this.getUserInfo;
			return authorizer_id === MIRROR_AUTHORIZER_ID;
		},

		/**
		 *  判断是当前用户是否在使用魔妆镜公众号
		 * @return {Boolean}
		 */
		hasAlipayAccount() {
			const { ali_account } = this.getUserInfo;
			return !!ali_account;
		},

		/**
		 * 判断屏幕宽
		 * @return {Boolean}
		 */
		isWideScreen() {
			const admin_id = this.resolveStoreAdminIdFormApp();
			return !!admin_id;
		},

		/**
		 *  解析 用户id
		 * 	@return {undefined}
		 */
		initData() {
			const { appid, openid, store_admin_id } = parseQueryString(); // query 参数
			this.form.store_admin_id = store_admin_id || null;
			this.form.openid = openid || this.getUserInfo.openid || null;
			this.form.appid = appid || this.getUserInfo.appid || null;
			if (this.form.openid) {
				this.fetchWechatUserRecords(this.form);
			} else {
				const toast = this.$createToast({
					type: 'warn',
					time: 2000,
					txt: '参数错误',
				});
				toast.show();
			}
		},

		/**
		 *  解析路由参数
		 */
		// revolveOpenid() {
		// 	const { openid } = this.$route.query;
		// 	return openid;
		// },

		/**
		 *  获取微信用户数据
		 * 	@param {Object} params {表单参数}
		 * 	@return {undefined}
		 */
		fetchWechatUserRecords(params) {
			const loding = this.$createToast({
				txt: '加载中',
			});
			loding.show();
			this.$http.get(`${API_LIST.WECHAT_BONUS}`, { params })
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						this.bonuses = data.bonuses;
						this.avantar = data.headimgurl;
						this.total_amount = data.total_amount;
					}
				})
				.catch((error) => {
					const toast = this.$createToast({
						type: 'warn',
						time: 2000,
						txt: error.message,
					});
					toast.show();
				})
				.then(() => {
					loding.hide();
				});
		},
	},
};
</script>
